<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :span="24">
            <a-breadcrumb>
              <a-breadcrumb-item href="">
                <a-icon type="home" />
                <span>首页</span>
              </a-breadcrumb-item>
              <a-breadcrumb-item href="">
                <a-icon type="user" />
                <span>库存管理</span>
              </a-breadcrumb-item>
              <a-breadcrumb-item href="">
                <span>
                <template v-if="this.id !== ''"> <a-icon type="edit" />库存明细</template>
                  <template v-else> <a-icon type="folder-add" />库存添加</template>
                </span>
              </a-breadcrumb-item>
            </a-breadcrumb>
          </a-col>
          <a-col :span="24">&nbsp;</a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <div class="table-page-search-wrapper">
      <a-form-model :model="formData" >
        <a-row :gutter="24">
          <a-col :span="16">
            <a-form-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-button-group>
                <a-button type="primary" @click="goBack"> <a-icon type="left" />返回 </a-button>
              </a-button-group>
            </a-form-item>
          </a-col>
          <a-col :span="8" :style="{ textAlign: 'right' }">
            <a-form-item>

            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="物资编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="formData.materialCode" :disabled="disabledOne" placeholder="请输入物资编码"></a-input>
            </a-form-item>
            <a-form-model-item label="物资名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="formData.materialName" :disabled="disabledOne" placeholder="请输入物资名称"></a-input>
            </a-form-model-item>
            <a-form-model-item label="仓库编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="formData.warehouseCode" :disabled="disabledOne" placeholder="请输入仓库编码"></a-input>
            </a-form-model-item>
            <a-form-model-item label="仓库名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="formData.warehouseName" :disabled="disabledOne"  placeholder="请输入仓库名称" >
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="预留数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="formData.reservedNum" :disabled="disabledOne"  placeholder="请输入预留数量" >
              </a-input>
            </a-form-model-item>
            <a-form-model-item label="预留单号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="formData.reservedCode" :disabled="disabledOne"  placeholder="请输入预留单号" >
              </a-input>
            </a-form-model-item>
            <a-form-model-item label="规格" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="formData.specs" :disabled="disabledOne" placeholder="请输入规格"></a-input>
            </a-form-model-item>
            <a-form-model-item label="型号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="formData.model" :disabled="disabledOne" placeholder="请输入型号"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="库存余量" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="formData.inventoryNum" :disabled="disabledOne"  placeholder="请输入库存余量"></a-input>
            </a-form-model-item>
            <a-form-model-item label="库存成本" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="formData.inventoryCostMethod" :disabled="disabledOne"  placeholder="请输入库存成本"></a-input>
            </a-form-model-item>
            <a-form-model-item label="计量单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="formData.unit" :disabled="disabledOne" placeholder="请输入计量单位"></a-input>
            </a-form-model-item>
            <a-form-model-item label="可用数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="formData.inventoryAvailableNum" :disabled="disabledOne" placeholder="请输入可用数量"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
    </div>

    <!-- table区域-begin -->
    <div>
      库存余量
      <a-table ref="surplusTable" bordered :data-source="surplusDataSource" :columns="surplusColumns">
      </a-table>
      库存交易记录
      <a-tabs default-active-key="1">
        <a-tab-pane key="1">
      <span slot="tab">
        <a-icon type="home" />
        入库与转移
      </span>
          <a-table ref="inStorageTable" bordered :data-source="inStorageDataSource" :columns="inStorageColumns">
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2">
      <span slot="tab">
        <a-icon type="shopping-cart" />
        发放与转移
      </span>
          <a-table ref="giveOutTable" bordered :data-source="giveOutDataSource" :columns="giveOutColumns">
          </a-table>
        </a-tab-pane>
      </a-tabs>

    </div>


  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@lone/lone-vue/src/utils/mixin'
  import { JEditableTableMixin } from '@lone/lone-vue/src/mixins/JEditableTableMixin'
  import { FormTypes } from '@lone/lone-vue/src/utils/JEditableTableUtil'
  import JEditableTable from '@lone/lone-vue/src/components/jeecg/JEditableTable'
  import JDate from '@lone/lone-vue/src/components/jeecg/JDate'
  import { postAction, putAction, deleteAction, getAction } from '@lone/lone-vue/src/api/manage'
  import Vue from 'vue'

  export default {
    name: 'MmsWzWarehouseStockDetailsList',
    mixins:[JEditableTableMixin, mixinDevice],
    components: {
      JDate,
      JEditableTable,
    },
    props:{
      //判断是编辑还是新增
      status:{
        type:String,
        required:false
      },
      //判断是编辑Id
      materialCode:{
        type: String,
        required: false
      },
      warehouseCode: {
        type: String,
        required: false
      }
    },
    watch:{
      status: {
        handler(newVal, oldVal) {
          this.loadFormData()
        },
        immediate: true
      }
    },
    data () {
      return {
        description: 'mms_wz_purchase_quality_details管理页面',
        top: 10,
        dateFormat: 'YYYY-MM-DD HH:mm:ss',
        // 表头
        disabledAll: false,
        disabledOne: false,
        editingKey: '',
        model: {},
        // 表头
        surplusColumns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'批次',
            align:"center",
            dataIndex: 'batch'
          },
          {
            title:'余量',
            align:"center",
            dataIndex: 'inventoryNum'
          },
          {
            title:'单价',
            align:"center",
            dataIndex: 'price'
          },
          {
            title:'库位',
            align:"center",
            dataIndex: 'inventoryArea'
          },
          {
            title:'入库时间',
            align:"center",
            dataIndex: 'inDt',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
        ],
        inStorageColumns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'交易类型',
            align:"center",
            dataIndex: 'materialCode'
          },
          {
            title:'交易日期',
            align:"center",
            dataIndex: 'inDt',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          {
            title:'数量',
            align:"center",
            dataIndex: 'currentArrivalNum'
          },
          {
            title:'单价',
            align:"center",
            dataIndex: 'price'
          },
          {
            title:'行成本',
            align:"center",
            dataIndex: 'materialName'
          },
          {
            title:'原仓库',
            align:"center",
            dataIndex: 'specs'
          },
          {
            title:'原库位',
            align:"center",
            dataIndex: 'model'
          },
          {
            title:'目标仓库',
            align:"center",
            dataIndex: 'unit'
          },
          {
            title:'目标库位',
            align:"center",
            dataIndex: 'qualifiedNum'
          }
        ],
        giveOutColumns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'交易类型',
            align:"center",
            dataIndex: 'materialCode'
          },
          {
            title:'交易日期',
            align:"center",
            dataIndex: 'inDt',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          {
            title:'数量',
            align:"center",
            dataIndex: 'currentArrivalNum'
          },
          {
            title:'单价',
            align:"center",
            dataIndex: 'price'
          },
          {
            title:'行成本',
            align:"center",
            dataIndex: 'materialName'
          },
          {
            title:'交易单号',
            align:"center",
            dataIndex: 'materialName'
          },
          {
            title:'仓库',
            align:"center",
            dataIndex: 'materialName'
          },
          {
            title:'库位',
            align:"center",
            dataIndex: 'materialName'
          },
        ],
        formData:{},
        surplusDataSource: [],
        inStorageDataSource: [],
        giveOutDataSource: [],
        url: {
          list: "/cg/mmsWzPurchaseQualityDetails/list",
          delete: "/cg/mmsWzPurchaseQualityDetails/delete",
          deleteBatch: "/cg/mmsWzPurchaseQualityDetails/deleteBatch",
          exportXlsUrl: "/cg/mmsWzPurchaseQualityDetails/exportXls",
          importExcelUrl: "cg/mmsWzPurchaseQualityDetails/importExcel",
        },
        dictOptions:{},
      }
    },
    created() {
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      loadFormData() {
        let that = this;
        this.surplusDataSource = [];
        this.inStorageDataSource = [];
        this.giveOutDataSource = [];
        if(this.materialCode !== '@ADD@'){
          let paramsObject = {materialCode: that['materialCode'], warehouseCode:  that['warehouseCode']};
          getAction('/ck/mmsWzWarehouseStock/getStockMasterInfo', paramsObject).then((res) => {
            if (res.success) {
              let result = res.result;
              if (result) {
                for(let p in result) {
                  that.$set(this.formData, p, result[p]);
                }
              }
            }
          });
          getAction('/ck/mmsWzWarehouseStock/getStockDetailBatch', paramsObject).then((res) => {
            if (res.success) {
              let subResult = res.result;
              if (subResult) {
                for(let r in subResult.records) {
                  let newData = subResult.records[r];
                  this.surplusDataSource.push(newData);
                }
              }
            }
          });
        }
        that.disabledOne = true;
      },
      goBack(){
        this.$emit('prevStep')
      },
      initDictConfig(){

      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>